<template>
  <div class="g-news-menus">
    <a
      v-for="(menu, index) in menus"
      :key="index"
      :href="`${hostPath}/${menu.name}`"
      class="g-news-menus-item flex items-center gap-[8px]"
      :class="{ active: activeMenu === menu.name }"
      @mouseenter="hoverMenu=menu.name"
      @mouseleave="hoverMenu=''"
    >
      <GIcon size="16px" :name="(activeMenu === menu.name || hoverMenu === menu.name) ? menu.activeIcon : menu.icon" /> <span class="g-news-menus-item_label">{{ menu.label }}</span>
    </a>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const hostPath = (import.meta as any).env.VITE_HOST

const activeMenu = computed(() => {
  return route.meta.pType as string
})
const hoverMenu = ref('')
const menus = [
  {
    label: '前沿资讯',
    name: 'news',
    icon: 'gt-plane-blog',
    activeIcon: 'gt-plane-blog-red',
  },
  {
    label: '精彩活动',
    name: 'activity',
    icon: 'gt-plane-activity',
    activeIcon: 'gt-plane-activity-red',
  },
]
</script>

<style lang="scss">
.g-news-menus {
  display: flex;
  gap: 32px;
  font-size: 16px;
  &-item {
    cursor: pointer;
    font-weight: 600;
    &_label {
      color: #3B3E55;
    }
    &.active {
      .g-news-menus-item_label {
        color: #000;
      }
    }
    &:hover {
      .g-news-menus-item_label {
        color: #000;
      }
    }
  }
  @media screen and (max-width: 768px){
    gap: 16px;
  }
}
</style>
